<template>
  <div class="my-wrap">
    <van-sticky>
      <div class="my-scan-wrap">
        <div class="my-scan">
          <div class="my-bd-first"></div>
          <van-button type="primary" round @click="onScancode">
            开启扫码
          </van-button>
          <div class="my-bd-second"></div>
        </div>
      </div>
    </van-sticky>

    <div class="mg-futter font-w">操作历史记录</div>
    <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
      <div class="list-group">
        <van-list
          v-model:loading="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="onLoad"
        >
          <van-cell-group inset v-if="scanList?.length">
            <van-cell
              v-for="(item, index) in scanList"
              :key="index"
              is-link
              @click="onScanLog(item)"
            >
              <template #title>
                <van-row>
                  <van-tag type="primary" v-if="item.custname">
                    {{ item.custname }}
                  </van-tag>
                  <div :class="item.custname ? 'mg-left' : ''">
                    {{ item.count || "-" }}个码，添加了{{
                      item.batchno || "-"
                    }}表单
                  </div>
                </van-row>
              </template>
              <template #label>
                <van-row>
                  <div>
                    {{ moment(item.cancelDate).format("YYYY-MM-DD HH:mm:ss") }}
                  </div>
                  <div class="mg-left">
                    客户积分数：{{ item.custPoints || "-" }}
                  </div>
                  <div class="mg-left">
                    业务员分数：{{ item.salemanPoints || "-" }}
                  </div>
                </van-row>
              </template>
            </van-cell>
            <van-cell :title="'共 ' + total + ' 个'" center>
              <div
                class="my-arrow-cell"
                v-if="total > scanList.length"
                @click="onLoad"
              >
                <van-icon name="arrow-down" />
              </div>
            </van-cell>
          </van-cell-group>
          <van-empty v-else description="暂无数据" />
        </van-list>
      </div>
    </van-pull-refresh>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { useRouter } from "vue-router";
import { showDialog } from "vant";
import api from "@/api/label.js";
import moment from "moment";

const router = useRouter();
const loading = ref(false);
const finished = ref(false);
const refreshing = ref(false);
const scanList = ref([]);
const pageNo = ref(1); // 现在多少页
const total = ref(0); // 总数

//获取列表接口----page..接受实参
async function getData(pageNo) {
  try {
    //接口获取
    const res = await api.cancelRecordPage({
      pageNo: pageNo, //当前页
      pageSize: 10, //需要多少条数据
    });
    //判断接口返回是否有值
    if (res.code == 0) {
      //判断是否为第一页
      if (pageNo == 1) {
        scanList.value = res.data.list;
      } else {
        //拼接数据concat
        scanList.value = scanList.value.concat(res.data.list);
      }
      total.value = res.data.total;
    } else {
      //否则置空
      scanList.value = [];
    }
  } catch (error) {
    //否则置空
    scanList.value = [];
    state.finished = true;
    state.loading = false;
  }
  return true;
}
async function onLoad() {
  if (refreshing.value) {
    scanList.value = [];
    pageNo.value = 1;
    refreshing.value = false;
  }
  await getData(pageNo.value);
  pageNo.value += 1;
  loading.value = false;
  if (scanList.value.length >= total.value) {
    finished.value = true;
  }
}

function onRefresh() {
  // 清空列表数据
  finished.value = false;
  // 重新加载数据
  // 将 loading 设置为 true，表示处于加载状态
  loading.value = true;
  onLoad();
}

async function openLoginDialog() {
  if (!localStorage.getItem("accessToken")) {
    showDialog({
      message: "该服务需要登录才可以操作，请先登录",
      confirmButtonText: "去登陆",
      cancelButtonText: "取消",
    }).then(() => {
      router.push({
        path: "/login",
      });
    });
    return false;
  }
  return true;
}

function onScancode() {
  if (openLoginDialog()) {
    router.push({
      path: "/scanCode",
    });
  }
}
function onScanLog(item) {
  router.push({
    path: "/scanLog",
    query: item,
  });
}

onMounted(() => {
  openLoginDialog();
});
</script>

<style lang="less" scoped>
.my-content {
  flex: 1;
  overflow-y: auto;
}

.my-scan-wrap {
  flex-shrink: 0;
  background-color: rgba(0, 0, 0, 0.1);
  padding: var(--cell-group-inset-padding, 16px);
}

.my-scan {
  height: 150px;
  flex-shrink: 0;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.my-bd-first {
  position: absolute;
  width: 100%;
  height: 50px;
  z-index: 10;
  top: 0;
  /* border: 3px solid var(--button-info-background-color, #1989fa); */
}

.my-bd-first::before {
  content: "";
  position: absolute;
  width: 45px;
  height: 45px;
  z-index: 10;
  top: 0;
  border-left: 3px solid var(--button-info-background-color, #1989fa);
  border-top: 3px solid var(--button-info-background-color, #1989fa);
}

.my-bd-first::after {
  content: "";
  position: absolute;
  width: 45px;
  height: 45px;
  z-index: 10;
  top: 0;
  right: 0;
  border-right: 3px solid var(--button-info-background-color, #1989fa);
  border-top: 3px solid var(--button-info-background-color, #1989fa);
}

.my-bd-second {
  position: absolute;
  width: 100%;
  height: 50px;
  z-index: 10;
  bottom: 0;
}

.my-bd-second::before {
  content: "";
  position: absolute;
  width: 45px;
  height: 45px;
  z-index: 10;
  bottom: 0;
  border-left: 3px solid var(--button-info-background-color, #1989fa);
  border-bottom: 3px solid var(--button-info-background-color, #1989fa);
}

.my-bd-second::after {
  content: "";
  position: absolute;
  width: 45px;
  height: 45px;
  z-index: 10;
  bottom: 0;
  right: 0;
  border-right: 3px solid var(--button-info-background-color, #1989fa);
  border-bottom: 3px solid var(--button-info-background-color, #1989fa);
}

.my-arrow-cell {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.list-group {
  min-height: 400px;
}
</style>
